<template>
  <div id="container-login">
    <div id="login-label">
      <table>
        <tr>
          <td
            colspan="3"
            style="
              height: 100px;
              font-size: 30px;
              border-bottom: 2px #5fbdee solid;
            "
          >
            <span style="font-weight: bold">用户登录</span>
          </td>
        </tr>
        <tr>
          <td style="text-align: center; width: 30%; font-weight: bold">
            用户名:
          </td>
          <td>
            <el-input
              v-model="username"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user-solid"
            ></el-input>
          </td>
          <td style="width: 5%"></td>
        </tr>

        <tr>
          <td style="text-align: center; font-weight: bold">密码:</td>
          <td>
            <el-input
              v-model="password"
              placeholder="请输入密码"
              prefix-icon="el-icon-key"
              show-password
            ></el-input>
          </td>
          <td style="width: 5%"></td>
        </tr>

        <tr>
          <td colspan="3" style="border-top: 2px #5fbdee solid">
            <span>
              <el-button type="primary" @click="login">登录</el-button>
            </span>
            <span style="margin-right: -200px; margin-left: 100px">
              <el-link
                :underline="false"
                @click="toRegister"
                style="color: white"
                icon="el-icon-edit"
                >注册</el-link
              >
            </span>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import "@/assets/css/login.css";

var md5 = require("js-md5");
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      this.AXIOS.post("/mycrmapi/login", {
        username: this.username,
        password: md5(this.password),
      })
        .then((res) => {
          if (res.data.status === 1) {
            // 设置 cookie
            this.COOKIE.set("token", res.data.data.token);
            this.COOKIE.set("is_login", 1); // 设置过期时间
            this.COOKIE.set("uid", res.data.data.uid); // 默认 1 天过去
            this.COOKIE.set("name", res.data.data.name); // 默认 1 天过去
            this.COOKIE.set("role_id", res.data.data.role_id); // 默认 1 天过去
            this.$router.push({ path: res.data.data.visit_url });
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    toRegister() {
      this.$router.push({ path: "/register" });
    },
  },
};
</script>

<style scoped>
#container-login {
  background: url("../../assets/img/background_img.png") no-repeat;
  width: 100%;
  height: 100%;
  /* border: 1px red solid; */
  text-align: center;
  overflow: hidden;
}

#login-label {
  float: left;
  margin-top: 5%;
  margin-left: 35%;
  width: 30%;
  height: 50%;
}

#login-label table {
  /* border: 1px red solid; */
  border-radius: 10px;
  /* border: 5px #000 solid; */
  width: 100%;
  text-align: center;
  color: whitesmoke;
  height: 320px;
  padding: 0;
  background: url("../../assets/img/box.png") no-repeat;
  background-size: 100% 320px;
}
</style>
